<template>
	<view>
		<Container class="container u-skeleton">
			<view class="header"></view>
			<Head class="head" />
			<text class="header-title u-skeleton-rect">搜索更多</text>
			<view class="search fonts u-skeleton-fillet" @tap="focus">
				<u-search placeholder="搜索你想要的内容" v-model="keyword" bg-color="white" height="80" :show-action="false" :disabled="true"></u-search>
			</view>
			<view class="column-title u-skeleton-rect" @tap="toPicbookList">童趣绘本</view>
			<view class="column-title u-skeleton-rect" @tap="toCourseList(true)">智慧课程</view>
			<view class="column-title u-skeleton-rect" @tap="toCourseList(false)">亲子社交</view>
			<view class="column-title u-skeleton-rect" @tap="toMap">地图优选</view>
			<text class="hot-title u-skeleton-rect">为您推荐</text>
			<view class="column-container">
				<view v-for="(item, index) in moreData.recommendPicbooks" :key="index">
					<view class="column-long fonts u-skeleton-fillet" @tap="toPicbook(item)" hover-class="touch" hover-start-time="0" hover-stay-time="300" v-if="index === 0">
						<view class="text">精选绘本</view>
						<view class="image"><ImageLoad :src="item.coverUrl"/></view>
						<view class="content">
							<image src="../../static/icon/recommend.png" mode="widthFix"></image>
							{{ item.title }}
						</view>
					</view>
					<view class="column  u-skeleton-fillet" @tap="toPicbook(item)" hover-class="touch" hover-start-time="0" hover-stay-time="300" v-if="index !== 0">
						<view class="image"><ImageLoad :src="item.coverUrl"/></view>
						<view class="title fonts">{{ item.title }}</view>
					</view>
				</view>
			</view>
			<view class="column-container">
				<view v-for="(item, index) in moreData.recommendCourses" :key="index">
					<view class="column-long fonts u-skeleton-fillet" @tap="toCourse(item)" hover-class="touch" hover-start-time="0" hover-stay-time="300" v-if="index === 0">
						<view class="text">精选课程</view>
						<view class="image"><ImageLoad :src="item.coverUrl"/></view>
						<view class="content">
							<image src="../../static/icon/recommend.png" mode="widthFix"></image>
							<text>{{ item.name }}</text>
						</view>
					</view>
					<view class="column u-skeleton-fillet" @tap="toCourse(item)" hover-class="touch" hover-start-time="0" hover-stay-time="300" v-if="index !== 0">
						<view class="image"><ImageLoad :src="item.coverUrl"/></view>
						<view class="title fonts">{{ item.name }}</view>
					</view>
				</view>
			</view>
		</Container>
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
import Head from '../../components/head/head.vue'
export default {
	data() {
		return {
			moreData: {
				recommendPicbooks: [{}, {}, {}],
				recommendCourses: [{}, {}, {}]
			},
			loading: true,
			keyword: ''
		}
	},
	components: {
		Head
	},
	onLoad() {
		this.loadData()
	},
	onShareAppMessage() {
		return {
			title: '孩子的认知优势，决定孩子的未来。赶紧测一测吧！',
			path: '/pages/more/more',
			imageUrl: ''
		}
	},
	methods: {
		/**
		 * 获取更多数据
		 */
		loadData: async function() {
			const [data, err] = await this.awaitWarp(this.$post(this.api.loadMoreData, { deviceUuid: this.deviceUuid }))
			//请求错误重新请求
			if (err) {
				uni.showLoading({
					title: '正在加载',
					mask: true
				})
				const timer2 = setTimeout(() => {
					this.loadData()
				}, 1000)
				this.$once('hook:beforeDestory', function() {
					clearInterval(timer2)
				})
				return
			}
			this.moreData = data
			console.log(this.moreData)
			uni.hideLoading()
			//隐藏骨架屏
			this.loading = false
		},
		/**
		 *	点击进入课程详情
		 */
		toCourse: function(items) {
			this.$Router.push({ name: 'courseDetail', query: { item: JSON.stringify(items) } })
		},
		/**
		 *  点击获取绘本数据 进入绘本阅读
		 */
		toPicbook: async function(item) {
			uni.showLoading({
				title: '正在加载',
				mask: true
			})
			const [data, err] = await this.awaitWarp(this.$post(this.api.loadPicbookData, { picbookId: item.id }))
			uni.hideLoading()
			if (err) {
				uni.showToast({
					title: '网络异常',
					icon: 'none',
					duration: 2000
				})
				return
			}
			this.$Router.push({ name: 'picbook', query: { item: JSON.stringify(data.picbook) } })
		},
		/**
		 * 点击进入绘本列表
		 */
		toPicbookList: function() {
			this.$Router.push({ name: 'picbookList' })
		},
		/**
		 * 点击进入课程列表
		 */
		toCourseList: function(bool) {
			this.$Router.push({ name: 'courseList', query: { recommendable: bool } })
		},
		/**
		 * 点击进入地图列表
		 */
		toMap: function() {
			this.$Router.push({ name: 'map' })
		},
		focus: function() {
			this.$Router.push({ name: 'search', query: { type: 'all' } })
		}
	}
}
</script>

<style scoped lang="stylus">
.header
	width 750rpx
	height 320rpx
	background url('http://hz-huibenxia.oss-cn-shenzhen.aliyuncs.com/Static-library/yingxiao/homeTop.png') 0 0 / 100% 100%
	position absolute

.header-title
	color white
	font-size 55rpx
	width fit-content
	font-weight bold
	margin 110rpx auto 30rpx auto
	text-shadow 2rpx 2rpx 2rpx #EFBC34
	z-index 1

.head
	position absolute
	left 50rpx
	top 100rpx
	z-index 1

.search
	z-index 1
	width 670rpx
	margin 30rpx auto
	filter drop-shadow(2rpx 2rpx 5rpx #c4c4c4)

.column-title
	color #FCAF4E
	font-size 32rpx
	width 670rpx
	height 60rpx
	margin-left 45rpx
	line-height 60rpx

.hot-title
	font-size 50rpx
	margin-left 40rpx
	margin-top 40rpx
	position relative
	width fit-content
	z-index 1
	font-weight bold

.column-container
	width 680rpx
	height auto
	margin 40rpx auto
	display flex
	flex-wrap wrap
	justify-content space-between

	.column-long
		width 680rpx
		height 480rpx
		border-radius 30rpx
		overflow hidden
		transform translate3d(0, 0, 0)
		box-shadow 0 0 50rpx #909399
		transition all 0.3s
		font-size 35rpx
		position relative

		.text
			color white
			font-size 40rpx
			height 100rpx
			width 100%
			position absolute
			left 0
			top 0
			padding 20rpx 20rpx 0 0
			box-sizing border-box
			text-align right
			background linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0))
			z-index 1

		.image
			height 400rpx

		.content
			width 100%
			height 80rpx
			display flex
			align-items center
			justify-content center
			color #7B2300

			image
				width 35rpx
				height auto
				margin-right 10rpx

	.column
		width 320rpx
		height 380rpx
		margin 40rpx 0
		background white
		border-radius 30rpx
		box-shadow 0 0 50rpx #dcdfe6
		display flex
		flex-direction column
		overflow hidden
		transform translate3d(0, 0, 0)
		transition all 0.3s
		font-size 30rpx

		.image
			width 320rpx
			height 320rpx
			position relative

		.title
			color #606266
			font-size 30rpx
			line-height 60rpx
			height 60rpx
			text-align center
</style>
